<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        通过标签属性的方式绑定事件
        1. 事件对象: 从window身上获取 event
        2. this指向问题：this指向window

        onchange事件触发时机:内容改变，失去焦点触发. 事件类型 ： Event

        oninput事件触发时机：只要内容改变就触发     事件类型： InputEvent

    -->
    <button onclick="fn(event)">单击</button>
    <input type="text" name="" id="" onchange="change(event)">
    <input type="text" name="" id="" oninput="inputHanler(event)">
    <script>
        // 1. 获取元素
        // 2. 绑定事件

        function fn(e){
            console.log('我被点击了')
            console.log('event: ', e)
            console.log('this: ', this) // this指向window， 说明fn是window调用的，
            // 进一步说明：通过标签属性绑定的事件，事件回调的函数都是window调用的，而不是当前标签元素调用的
        }
        // 
        function change(e){
            console.log('我的内容改变了')
            console.log(e.target.value)// e 事件对象 。 e.target 是事件源对象  【当前就是input文本框】
            console.log('e: ', e)
        }

        function inputHanler(e){
            console.log('我是input事件触发了')
            console.log('value: ', e.target.value)
            console.log('e: ', e)
        }
    </script>
</body>
</html>